<template>
    <div>
        <el-table
            :id="idRef"
            :ref="idRef"
            :data="tableData"
            size="small"
            @sort-change="onSortChange"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="50" fixed="left">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="launchName"
                fixed="left"
                label="推广名称">
            </el-table-column>
            <el-table-column
                prop="platform"
                fixed="left"
                :formatter="formatPlatform"
                label="平台">
            </el-table-column>
            <el-table-column
                prop="syncDate"
                fixed="left"
                width="100px"
                label="数据日期">
            </el-table-column>
            <el-table-column
                prop="dayOfWeek"
                fixed="left"
                width="60px"
                label="周几">
            </el-table-column>
            <el-table-column
                prop="hour"
                fixed="left"
                label="分时">
            </el-table-column>
            <el-table-column
                prop="premiumName"
                fixed="left"
                label="定向">
            </el-table-column>
            <el-table-column label="数据指标" align="center" prop="allItems" v-if="mode !== 'simple'">
                <el-table-column :prop=item.prop :label=item.label :width=item.width v-for="item in fields"
                                 :key="item.prop"
                                 sortable="custom"
                                 :sort-orders="['ascending','descending', null]"
                                 :render-header="(h,obj) => renderHeader(h ,obj, item)">
                </el-table-column>
            </el-table-column>
            <el-table-column label="数据指标" align="center" prop="someItems" v-else>
                <el-table-column
                    prop="t30001"
                    width="70"
                    label="花费">
                </el-table-column>
                <el-table-column
                    prop="tt"
                    width="140"
                    label="团单量/单笔团单均价">
                    <template v-slot="scope">
                        <span>{{ scope.row.t30020 }} /  {{ scope.row.u10004 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="bb"
                    width="130"
                    label="曝光/千次曝光成本">
                    <template v-slot="scope">
                        <span>{{ scope.row.t30002 }} /  {{ scope.row.u10cpm }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dd"
                    width="150"
                    label="点击/点击率/点击均价">
                    <template v-slot="scope">
                        <span>{{ scope.row.t30003 }} /  {{ scope.row.u10001 }} / {{ scope.row.t30004 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ll"
                    width="130"
                    label="浏览/浏览率">
                    <template v-slot="scope">
                        <span>{{ scope.row.t30005 }} /  {{ scope.row.u10002 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ll"
                    width="130"
                    label="感兴趣/感兴趣率">
                    <template v-slot="scope">
                        <span>{{ scope.row.t30026 }} /  {{ scope.row.u10003 }}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column
                prop="createTime"
                align="center"
                width="150px"
                label="同步时间">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100, 1000, 10000]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
    </div>
</template>

<script>
import {addDpCpcReport, getDpCpcReportByPage, updateDpCpcReport} from '@/api/api'

export default {
    name: "DpCpcReportTable",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            // 字段信息
            fields: this.CONST.cpc_fields,
            // 排序前的数据
            beforeOrderTableData: [],

            idRef: "",
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        launchId: Number,
        dimension: String,
        platform: String,
        timeUnit: String,
        syncDate: String,
        size: {
            type: String,
            default: 'small'
        },
        mode: {
            type: String,
            // 默认简单模式
            default: 'simple'
        },
    },
    watch: {
        shopName: function (val, oldVal) {
            this.shopName = val;
        }
    },
    methods: {
        // 渲染头部
        renderHeader(h, {column, $index}, item) {
            return [column.label, h(
                'el-tooltip',
                {
                    props: {
                        content: item.desc,
                        placement: 'top'
                    },
                },
                [h('span', {class: {'el-icon-question': true}})]
            )]
        },
        // 排序
        onSortChange({prop, order}) {
            if (order != null) {
                if (this.beforeOrderTableData.length === 0) {
                    this.beforeOrderTableData = this.tableData.concat();
                }
                this.tableData.sort(this.compare(prop, order));
            } else {
                this.tableData = this.beforeOrderTableData.concat();
            }
        },
        // 排序函数
        compare(propertyName, sort) {
            let _this = this;
            return function (obj1, obj2) {
                let value1 = obj1[propertyName]
                let value2 = obj2[propertyName]
                if (typeof value1 === 'string' && typeof value2 === 'string') {
                    if (value1.indexOf('%') !== -1 && value2.indexOf('%') !== -1) {
                        value1 = _this.toPoint(value1);
                        value2 = _this.toPoint(value2);
                    }
                }
                if (typeof value1 === 'string' && typeof value2 === 'string') {
                    const res = value1.localeCompare(value2, 'zh')
                    return sort === 'ascending' ? res : -res
                } else {
                    if (value1 <= value2) {
                        return sort === 'ascending' ? -1 : 1
                    } else if (value1 > value2) {
                        return sort === 'ascending' ? 1 : -1
                    }
                }
            }
        },
        // 百分数转化为小数
        toPoint(percent) {
            let str = percent.replace("%", "");
            str = str / 100;
            return str;
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatPlatform: function (row, column, cellValue) {
            if (cellValue == '0') {
                return "双平台";
            } else if (cellValue == '1') {
                return "点评";
            } else if (cellValue == '2') {
                return "美团";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            let ss = "所有维度";
            if (this.dimension === 'shop') {
                ss = "门店维度";
            } else if (this.dimension === 'launch') {
                ss = "推广维度";
            } else if (this.dimension === 'keyword') {
                ss = "关键字维度";
            }
            this.GLOBAL.exportExcel('#' + this.idRef, this.shopName + "推广通" + ss + "数据报告.xlsx");
        },
        add: function () {
            addDpCpcReport(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateDpCpcReport(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            if (this.launchId && this.launchId !== -1) {
                this.condition.search.launchId = this.launchId;
            }
            if (this.dimension) {
                this.condition.search.dimension = this.dimension;
            }
            if (this.syncDate) {
                this.condition.search.syncDate = this.syncDate;
            }
            if (this.platform) {
                this.condition.search.platform = this.platform;
            }
            if (this.timeUnit) {
                this.condition.search.timeUnit = this.timeUnit;
            }
            getDpCpcReportByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                // 清除排序
                this.$refs[this.idRef].clearSort();
                // 重新设置排序前数据
                this.beforeOrderTableData = [];
            });
        },
    },
    beforeUpdate() {
        this.$nextTick(() => {
            // 在数据加载完，重新渲染表格
            this.$refs[this.idRef].doLayout();
        })
    },
    created() {
        this.getData();
        this.idRef = "mainTable" + Math.round(Math.random() * 10) * Math.round(Math.random() * 10);
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
